<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

	$(function() {
		$('#toolbar').toolbar({buttons:[{name:'search',iconCls:'icon-search',text:'检索'},
           	{name:'add',iconCls:'icon-add',text:'创建'},
       		{name:'edit',iconCls:'icon-edit',text:'修改',disabled:true},
       		{name:'del',iconCls:'icon-del',text:'删除',disabled:true},
       		{name:'assign',iconCls:'icon-tablechk',text:'分配功能',disabled:true}
      	],handler:handler});
		$('#grid').datagrid({url:'page',title:'角色列表',pagination:true,singleSelect:true,striped:true,fitColumns:true,rownumbers:true,fit:true,
			columns:[[ 
				{field:'name', title:'名称', width: 180},
				{field:'des', title:'说明', width: 400}
			]],
			onClickRow:function(i,r) {
				$('#toolbar').toolbar('enableAll'); //启动所有按钮
			},
			onBeforeLoad:function(param) {
				$('#toolbar').toolbar('search,add');
			}
		});
	});

	function handler() {
		if(this.name == 'search') return toSearch();
		if(this.name == 'add') return toAdd();
		var item = $('#grid').datagrid('getSelected');
		if(!item) return;
		switch(this.name) {
		case 'edit': toEdit(item);break;
		case 'del': toDel(item);break;
		case 'assign': toAssign(item);break;
		}
	}

	function toSearch() {
		$('#grid').datagrid('load',$('#qform').serializeArray());
	}
	
	function toAdd() {
		showDialog({type:'1'});
	}

	function toEdit(item) {
		showDialog(item);
	}
	
	function toDel(item) {
		$confirm('您确定要删除“'+item.name+'”角色信息吗？',function() {
			$.post('delete/'+item.id,{},function(r) {
				if(r.code <= 0) return $error(r.msg);
				$('#grid').datagrid('reload');
				$prompt('删除成功');
			},'json');
		});
	}

	function showDialog(data) {
		$('#dataform').form('clear').form('load',data);
		$('#dialog').dialog('open');
	}
	
	function save() {
		$.submit('#dataform',function(r) {
			if(r.code<0) return $alert(r.msg);
			$('#dialog').dialog('close');
			$('#grid').datagrid('reload');
			$prompt('保存成功');
		});
	}

	var loading = false;
	function toAssign(item) {
		if(!$('#treeAssign').is('.tree')) {
			$.post('../module/tree0.do',function(nodes){
				$('#treeAssign').tree({data:nodes,animate:true,checkbox:true,cascadeCheck:true
					,formatter:function(node){
		                var html = '<span>' + node.text + '</span>';
		                if (node.children) html += '&nbsp;<span style="color:#ff6600;">(' + node.children.length + ')</span>';
		                else if(node.wings) {
		                	html += '<span style="margin-left:5px;">：</span>';
		                	for(var i = 0; i < node.wings.length; i++) {
		                		var wing = node.wings[i];
		                		html += '<span data-id="'+wing.id+'" data-pid="'+node.id+'" data-type="wing-node" class="checkbox-off" style="margin-right:10px;color:#0099ff;">' + wing.text + '</span>';
		                	}
		                }
		                return html;
		            }
					,onBeforeSelect:function(node){return false;}
					,onBeforeCheck:checkNode
				}).tree('expandAll');;
				$('span[data-type="wing-node"]').click(checkWing);
				toAssign(item)
			},'json');
			return;
		}
		$('#treeAssign').attr('data-id',item.id);
		$.post('modules.do',{id:item.id},function(data) {
			var tree = $('#treeAssign');
			var nodes = tree.tree('getChecked');
			for(var i = 0; i < nodes.length; i++) tree.tree('uncheck',nodes[i].target);
			$('span[data-type="wing-node"]').removeClass().addClass('checkbox-off');
			loading = true;
			if(data&&data.length>0) {
				var node;
				for(var i = 0; i < data.length; i++) {
					node = $('span[data-id="'+data[i]+'"]');
					if(node.length > 0) node.removeClass().addClass('checkbox-on');
					else{
						node = tree.tree('find', data[i]);
						if(node) tree.tree('check', node.target);
					}
				}
			}
			loading = false;
			$('#dialogAssign').dialog('open');
		},'json');
	}
	
	/** 递归选择数节点  **/
	function checkNode(node, chked) {
		if(loading) return;
		if(chked) {
			if($('span[data-pid="'+node.id+'"].checkbox-on').length == 0) $('span[data-pid="'+node.id+'"]').removeClass().addClass('checkbox-on');
		}
		else $('span[data-pid="'+node.id+'"]').removeClass().addClass('checkbox-off');
	}
	
	/** 扩展节点选择 **/
	function checkWing() {
		var $this = $(this);
		if($this.hasClass('checkbox-off')) {
			$this.removeClass().addClass('checkbox-on');
			var node = $('#treeAssign').tree('find',$this.attr('pid'));
			if(node && node.target) $('#tree').tree('check', node.target);
		}
		else $this.removeClass().addClass('checkbox-off');
	}

	function assign() {
		var nodes = $('#treeAssign').tree('getChecked');
		var params = [];
		params[0] = {name:'id',value:$('#treeAssign').attr('data-id')};
		var node;
		for(var i = 0; i < nodes.length; i++) {
			node = nodes[i];
			if(node.attributes && node.attributes.isNode) continue; //若为目录则忽略
			params[params.length] = {name:'modules',value:node.id};
		}
		var wings = $('span[data-type="wing-node"].checkbox-on');
		for(var  i = 0; i < wings.length; i++) params[params.length] = {name:'modules',value: $(wings[i]).attr('data-id')};
		if(params.length == 1) {
			$confirm('您没有选中任何有效的功能模块，<br/>确定要清除分配吗？',function(){
				postData(params);
			});
			return;
		}
		$.post('assign.do',params,function(r){
			if(r.code < 0) return $alert(r.msg);
			top.$prompt('分配成功');
			$('#dialogAssign').dialog('close');
		},'json');
	}
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:90px;">
		<div id="toolbar" class="toolbar"></div>
		<form id="qform">
			<table class="form-tbl">
				<tr class="form-tr">
					<th class="form-th">名称：</th>
					<td class="form-td" style="width:150px;">
						<input type="text" name="name" class="form-text" />
					</td>
					<td></td>
				</tr>
			</table>
		</form>
	</div>
	<div data-options="region:'center',border:false" >
		<table id="grid"></table>
		<div id="dialog" class="easyui-dialog" data-options="title:'角色信息',iconCls:'icon-role',closed:true,modal:true,width:500,height:300,top:30,buttons:[{iconCls:'icon-save',text:'保存',handler:save}]">
			<form id="dataform" action="save" method="post">
				<input type="hidden" name="id"/>
				<table class="form-tbl">
					<tr class="form-tr">
						<th class="form-th">角色名称：</th>
						<td class="form-td required">
							<input type="text" name="name" class="easyui-validatebox form-text" data-options="required:true" />
						</td>
					</tr>
					<tr class="form-tr">
						<th class="form-th">角色说明：</th>
						<td class="form-td">
							<textarea name="des" class="easyui-validatebox form-text" ></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div id="dialogAssign" class="easyui-dialog" data-options="title:'分配功能',iconCls:'icon-tablechk',closed:true,modal:true,width:800,height:450,top:30,buttons:[{iconCls:'icon-save',text:'确定分配',handler:assign}]">
			<ul id="treeAssign"></ul>
		</div>
	</div>
</body>
</html>